<template>
	<view class="lineitem">
		<view class="detial_box">
			<view class="wrap">
				<u-swiper :list="list" mode="number" indicator-pos="bottomRight" height="566"></u-swiper>
			</view>
			<view class="detial_box_txt my-pdl-15">
				<view class="num">
					<text class="num_fuhao">￥</text>
					<text class="num_money">{{price||0}}</text>
				</view>
				<view class="name">{{name||'暂无'}}</view>
			</view>
		</view>
		<view class="goods_box my-mgt-15 my-pdl-15">
			<goodsDetail :detail="detail"></goodsDetail>
		</view>
		<!-- <view class="attention_box my-mgt-15">
			<view class="attention_box_tlt">注意事项</view>
			<view class="attention_box_contant my-pdlr-15">
				<view class="txt">
					1.激活标准
				</view>
				<view class="contant">
					首刷300，既视为激活，推荐人便可得相应推荐积分
					1000。
				</view>
			</view>
			<view class="attention_box_contant my-pdlr-15 my-mgt-5">
				<view class="txt">
					2.有效激活
				</view>
				<view class="contant">
					每个月刷满五千，连续三个月，-次或一个月内三万不算。未达标将扣除推荐人奖励。
				</view>
			</view>
			<view class="attention_box_contant my-pdlr-15 my-mgt-5">
				<view class="txt">
					3.流量卡扣费说明
				</view>
				<view class="contant">
					激活后随卡流量由移动公司收取商户36元每年的流量费。
				</view>
			</view>
		</view>
		<view class="juti_box my-mgt-15 my-pdlr-15">
			<view class="juti_box_tlt">{{companyName}}{{brandName}}POS礼包</view>
			<view class="juti_box_txt">产品名称：{{companyName}}{{brandName}}POS礼包</view>
			<view class="juti_box_txt">产品价格: {{price}}元</view>
			<view class="juti_box_txt">数量: 1台</view>
		</view>
		<view class="licence_box my-mgt-15 my-pdlr-15">
			<view class="licence_box_tlt">产品优势</view>
			<view class="licence_box_img">
				<image class="img" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/JBgzWUUXeF_theCheck.png" mode=""></image>
				<text class="my-mgl-10">支付牌照</text>
			</view>
			<image class="licence_image" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/EyopyQDdUA_poicture.png" mode=""></image>
		</view> -->
		<view style="height: 100rpx;"></view>
		<view class="lint_btn my-pdlr-15">
			<view class="left_box" @click="goService">
				<image class="kefu_img" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/lBMdnhmgJe_customer.png" mode=""></image>
				<view class="line_txt">客服</view>
			</view>
			<view class="right_box">
				<button class="btn_liji" @click="buyBox=true">立即购买</button>
			</view>
		</view>
		<u-popup v-model="buyBox" mode="bottom" border-radius="40">
			<view class="goodsBuy my-pdlr-15">
				<view class="goodsBuy-top">
					<view class="goodsBuy-top_img my-mgr-15">
						<image :src="list[0]"mode=""></image>
					</view>
					<view class="">
						<view class="txt_money">{{price||0}}</view>
						<view class="txt_name my-mgt-4">已选：{{companyName}}{{brandName}}礼包</view>
					</view>
				</view>
				<view class="guige_box">
					<view class="guige_box_tlt">规格</view>
					<view class="change_box my-mgt-10">
						<view class="change_box_item">{{companyName}}{{brandName}}礼包</view>
					</view>
				</view>
				<view class="num_box">
					<view class="">数量</view>
					<view class="">
						<u-number-box :min="1" :max="stock" :input-width="48" :input-height="48" v-model="goodsNum" @change="valChange"></u-number-box>
					</view>
				</view>
				<view class="complete">
					<button class="btn" @click="goSureOrder">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import goodsDetail from "@/components/goodsDetail/goodsDetail.vue"
	import { createNamespacedHelpers } from "vuex";
	const { mapActions,mapState } = createNamespacedHelpers("address");
	export default {
		components:{
			goodsDetail,
		},
		data() {
			return {
				buyBox:false,
				goodsNum:1,
				telephone:'15307932258',
			};
		},
		onLoad() {
			this.getGoodsData(uni.getStorageSync("id"))
		},
		created() {
			this.getAddressData()
		},
		computed: {
			...mapState(["price","list","name","companyName","brandName","stock","detail"]),
		},
		methods:{
			...mapActions(["getAddressData","getGoodsData"]),
			valChange(e){
				if(e.value >= this.stock){
					uni.showToast({
						title:"购买数量超出库存",
						icon:"none"
					})
					return
				}
				
			},
			goService() {
				uni.makePhoneCall({
					phoneNumber:this.telephone
				})
			},
			goSureOrder(){
				if(this.goodsNum < 0){
					uni.showToast({
						title:"购买数量不能小于零",
						icon:"none"
					})
					return
				}
				uni.setStorageSync('goodNum',this.goodsNum)
				uni.redirectTo({
					url:"/pages/mallStore/makeSureOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lineitem{
		width: 100%;
		background: #FAFAFA;
		position: relative;
		.detial_box{
			width: 100%;
			height: 750rpx;
			background: #FFFFFF;
			.wrap {
				width: 100%;
				height: 566rpx;
			}
			.detial_box_txt{
				width: 100%;
				height: 180rpx;
				.num,.name{
					width: 100%;
				}
				.num{
					line-height: 90rpx;
					color: #F05329;
					font-weight: bold;
					.num_fuhao{
						font-size: 24rpx;
					}
					.num_money{
						font-size: 48rpx;
					}
				}
				.name{
					line-height: 30rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		.goods_box{
			width: 100%;
			height: auto;
			// height: 1560rpx;
			background: #FFFFFF;
		}
		.attention_box{
			width: 100%;
			height: 657rpx;
			background: #FFFFFF;
			.attention_box_tlt{
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #F05329;
			}
			.attention_box_contant{
				width: 100%;
				min-height: 100rpx;
				.txt{
					width: 100%;
					line-height: 70rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
				}
				.contant{
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: #8d8d8d;
				}
			}
		}
		.juti_box{
			width: 100%;
			height: 347rpx;
			background: #FFFFFF;
			.juti_box_tlt{
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #F05329;
			}
			.juti_box_txt{
				width: 100%;
				height: 60rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		.licence_box{
			width: 100%;
			height: 750rpx;
			background: #FFFFFF;
			.licence_box_tlt{
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #F05329;
			}
			.licence_box_img{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				.img{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.licence_image{
				width: 100%;
				height: 515rpx;
			}
		}
		.lint_btn{
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 4rpx -7rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0rpx;
			bottom: 0rpx;
			z-index: 99;
			.left_box{
				width: 10%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.kefu_img{
					width: 36rpx;
					height: 36rpx;
				}
				.line_txt{
					font-size: 20rpx;
					font-weight: 500;
					color: #666666;
				}
			}
			.right_box{
				width: 210rpx;
				height: 80rpx;
				.btn_liji{
					width: 210rpx;
					line-height: 80rpx;
					text-align: center;
					background: #F05329;
					border-radius: 40rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.goodsBuy{
			width: 100%;
			height: 900rpx;
			background: #FFFFFF;
			.goodsBuy-top{
				width: 100%;
				height: 280rpx;
				display: flex;
				align-items: center;
				.goodsBuy-top_img{
					image{
						width: 200rpx;
						height: 200rpx;
					}
				}
				.txt_money{
					font-size: 48rpx;
					font-weight: bold;
					color: #F05329;
				}
				.txt_name{
					font-size: 30rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.guige_box{
				width: 100%;
				height: 150rpx;
				.guige_box_tlt{
					width: 100%;
					height: 40rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
				}
				.change_box{
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					.change_box_item{
						width: 240rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						background: #F05329;
						border-radius: 10rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
			.num_box{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.complete{
				width: 100%;
				height: 180rpx;
				display: flex;
				align-items: flex-end;
				.btn{
					width: 690rpx;
					line-height: 88rpx;
					margin: 0 auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
